<template>
	<div class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">{{operationName}}用户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						
						<div class="form-group">
							<label class="col-sm-2 control-label">父节点</label>
							<div class="col-sm-10">
								<treeSelect ref="resourceTree" :treeData="resources" :multiple='false'></treeSelect>
							</div>
						</div>							
									
						<div class="form-group">
							<label class="col-sm-2 control-label">名称</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="resource.name" >
							</div>
						</div>
						
	
						<div class="form-group">
							<label class="col-sm-2 control-label">编码</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="resource.code" >
							</div>
						</div>
											
						
						<div class="form-group">
							<label class="col-sm-2 control-label">页面</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="resource.page">
							</div>
						</div>
						
						
						<div class="form-group">
							<label class="col-sm-2 control-label">请求</label>
							<div class="col-sm-10">
								<input class="form-control" v-model="resource.request">
							</div>
						</div>						

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" @click="save">{{operationName}}</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
</template>

<script>
import treeSelect from '@/views/components/select/treeSelect'
export default{
	data() {
		return {
			resources: [],
		}
	},
	props: {
		resource: Object
	},
	components: {
		treeSelect,
	},
	computed: {
		operationName() {
			return this.resource.id ? "修改" : "新增"
		},
		parentId() {
			return this.resource.parentId
		},
	},
	mounted() {
		this.treeResource()
	},
	watch: {
		parentId() {
			this.$refs.resourceTree.value = this.parentId
		}
	},
	methods: {
		save() {
			if(!this.$global.validator.require(this.resource.name, '名称')) return

			this.resource.parentId = this.$refs.resourceTree.value || 0;
			let url = process.env.VUE_APP_SERVER + 'system/admin/resource/save'
			this.$axios.post(url, this.resource)
				.then(res => {
					if(res.data.status === 1) {
						this.$toast(this.operationName + '资源成功', this.$global.toast.success)
						$('#save-modal').modal('hide')
						this.$parent.list(1)
					}else {
						this.$toast(res.data.msg, this.$global.toast.fail)
					}
				})
		},
		treeResource() {
			let url = process.env.VUE_APP_SERVER + 'system/admin/resource/tree'
			this.$axios.post(url)
				.then(res => {
					let data = res.data.data
					this.resources = data
				})
		},
	}
}	
</script>

<style>
</style>
